<template>
	<view class="my_container">
		<CustomNavbarTwo :title="pageTitle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_body">
				<view class="list-wrap">
					<view @tap.stop="lookMarket(item.userId)" v-for="(item, index) in swipeList" :key="index"
						class="notification-item" :class="{ 'has-multiple': item.likeCount > 1 }">
						<!-- 左侧用户信息 -->
						<view class="user-section">
							<image :src="item.avatar" class="user-avatar"
								:style="{ borderColor: getAvatarBorderColor(item) }" />
						</view>
						<!-- 中间内容 -->
						<view class="user-meta">
							<view class="username-box">
								<text class="username">{{ item.nickName }}</text>
								<!-- <text class="time">{{ formatDisplayTime(item.customDate) }}</text> -->
							</view>
							<view class="action-text">
								<text>关注了你</text>
								<text class="address"
									v-if="item.city">{{ showLocation(item.province, item.city) }}</text>
								<text class="time">{{ formatDisplayTime(item.customDate) }}</text>
							</view>
						</view>
						<!-- 右侧内容预览 -->
						<view class="preview-section" @click.stop="guanzhuorquxiaoguanzhu(item)">
							<view v-if="item.collectFlag == 1" class="preview-header-ed">取消关注</view>
							<view v-else class="preview-header">关注</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 70rpx; line-height: 70rpx; width: 100%">
				<u-loadmore icon :status="status" />
			</view>
		</view>
	</view>
</template>
<script>
	import CustomNavbarTwo from '@/components/CustomNavbarTwo.vue';
	import locationFormatter from '@/util/locationFormatter';
	const api = require('../../util/api.js');
	export default {
		components: {
			CustomNavbarTwo
		},
		data() {
			return {
				pageTitle: '我的粉丝',
				showSex: false,
				pageSize: 7,
				pageNum: 1,
				total: 0,
				status: 'loading',
				show: true,
				swipeList: [],
				shareTile: ''
			};
		},
		onPullDownRefresh() {
			// 下拉刷新的处理逻辑
			this.pageNum = 1;
			this.status = 'loading';
			this.swipeList = [];
			this.getData();
		},
		onReachBottom() {
			if (this.total == this.swipeList.length) {
				this.status = 'nomore';
				this.show = true;
				return;
			}
			this.show = true;
			this.pageNum++;
			this.getData();
		},
		onLoad() {
			this.getData();
			// this.getReset();
			wx.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ['shareAppMessage', 'shareTimeline']
			});
		},
		methods: {
			//格式化地址
			showLocation(pro, city) {
				const displayName = locationFormatter.format(pro, city);
				return displayName;
			},
			formatDisplayTime(timeStr) {
				// 容错处理无效时间
				if (!/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(timeStr)) {
					return '时间格式错误';
				}
				// 解析时间（兼容iOS）
				const [datePart, timePart] = timeStr.split(' ');
				const [year, month, day] = datePart.split('-');
				const [hours, minutes, seconds] = timePart.split(':');
				const targetTime = new Date(year, month - 1, day, hours, minutes, seconds);
				const now = new Date();
				const diff = now - targetTime;
				// 时间分段判断
				if (diff < 0) return '未来时间';
				if (diff < 60 * 1000) return '刚刚';
				if (diff < 3600 * 1000) {
					const mins = Math.floor(diff / 60000);
					return `${mins}分钟前`;
				}
				if (diff < 24 * 3600 * 1000) {
					const hrs = Math.floor(diff / 3600000);
					return `${hrs}小时前`;
				}
				// 日期格式化（本地时区）
				return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
			},
			//处理关注取消关注
			guanzhuorquxiaoguanzhu(item) {
				var title = '';
				var processType = '';
				if (item.collectFlag == 1) {
					title = '取消关注成功';
					processType = '0';
				} else {
					title = '关注成功';
					processType = '1';
				}
				const data = {
					operateType: '4',
					pubInfoId: item.userId,
					processType: processType
				};
				this.$https.post(this.$api.favoriteAndCollect, data).then((res) => {
					if (res.code === 200) {
						uni.showToast({
							title: title,
							icon: 'success'
						});
						item.collectFlag = item.collectFlag == 1 ? 0 : 1;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			//时间格式处理
			formatDisplayTime(timeStr) {
				// 容错处理无效时间
				if (!/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(timeStr)) {
					return '时间格式错误';
				}
				// 解析时间（兼容iOS）
				const [datePart, timePart] = timeStr.split(' ');
				const [year, month, day] = datePart.split('-');
				const [hours, minutes, seconds] = timePart.split(':');
				const targetTime = new Date(year, month - 1, day, hours, minutes, seconds);
				const now = new Date();
				const diff = now - targetTime;
				// 时间分段判断
				if (diff < 0) return '未来时间';
				if (diff < 60 * 1000) return '刚刚';
				if (diff < 3600 * 1000) {
					const mins = Math.floor(diff / 60000);
					return `${mins}分钟前`;
				}
				if (diff < 24 * 3600 * 1000) {
					const hrs = Math.floor(diff / 3600000);
					return `${hrs}小时前`;
				}
				// 日期格式化（本地时区）
				return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
			},
			getAvatarBorderColor(item) {
				return item.isNew ? '#FF4D4D' : '#E5E5E5';
			},
			//查看商家
			lookMarket(id) {
				uni.navigateTo({
					url: '/page/market/index?id=' + id
				});
			},
			getData() {
				const query = {
					pageSize: this.pageSize,
					pageNum: this.pageNum
				};
				this.$https.post(this.$api.handleFansList, query).then((res) => {
					if (res.code === 200) {
						if (this.pageNum == 1) {
							this.swipeList = [];
						}
						const data = res.data;
						this.total = res.total;
						this.swipeList = [...this.swipeList, ...data];
						this.pageTitle = '我的粉丝（' + res.total + ')';
						if (res.data.length == 0 || res.total <= 7) {
							this.status = 'no-more';
						} else {
							this.status = 'more';
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},
			getReset() {
				const query = {
					operateType: 4
				};
				this.$https.post(this.$api.handleResetNewFlag, query).then((res) => {
					if (res.code === 200) {}
				});
			}
		}
	};
</script>
<style lang="scss" scoped>
	/* 设计系统变量 */
	$primary-red: #ff4d4d;
	$text-dark: #161823;
	$text-gray: #999999;

	.share-btn {
		font-size: 20rpx;
		width: 100rpx;
		line-height: 37rpx;
	}

	.my_container {
		width: 100%;

		.my_container_body {
			width: 750rpx;
			// background: linear-gradient(180deg, #ddffde 0%, #f7f7f7 29%, #f7f7f7 100%);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			min-height: 1624rpx;

			.my_container_body_head {
				width: 686rpx;
				height: 176rpx;
			}

			.my_container_body_body {
				width: 686rpx;
				margin-left: 32rpx;
				display: flex;

				.list-wrap {
					width: 100%;
					display: flex;
					flex-direction: column;

					.notification-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						transition: background 0.25s ease;
						margin-top: 40rpx;

						&:active {
							background: #fafafa;
						}
					}

					/* 用户头像区 */
					.user-section {
						display: flex;
						align-items: flex-start;

						.user-avatar {
							width: 50px;
							height: 50px;
							border-radius: 50%;
							border: 1.5px solid transparent;
							margin-right: 12px;
						}
					}

					//中间区域
					.user-meta {
						flex: 1;

						.username-box {
							display: flex;
							align-items: center;
							margin-bottom: 4px;

							.username {
								font-size: 15px;
								color: $text-dark;
								font-weight: 600;
								margin-right: 8px;
							}

							.time {
								width: 112rpx;
								font-size: 20rpx;
								color: #73737a;
								margin-left: 5px;
							}
						}

						.action-text {
							font-size: 13px;
							color: $text-dark;
							line-height: 1.4;

							.highlight {
								color: $primary-red;
								font-weight: 500;
								margin-right: 4px;
							}

							.time {
								font-size: 20rpx;
								color: #73737a;
								margin-left: 5px;
							}

							.address {
								font-size: 20rpx;
								color: #73737a;
								margin-left: 5px;
							}
						}
					}

					/* 右侧预览区 */
					.preview-section {
						.preview-header {
							font-size: 24rpx;
							border-radius: 10rpx;
							text-align: center;
							width: 120rpx;
							padding: 10rpx 0;
							color: #fff;
							background: #fe2b54;
						}

						.preview-header-ed {
							font-weight: 600;
							font-size: 24rpx;
							border-radius: 10rpx;
							text-align: center;
							width: 120rpx;
							padding: 10rpx 0;
							color: #151723;
							background: #f3f3f3;
						}
					}
				}

				.show-items-item {
					width: 686rpx;
					height: 322rpx;
					background: #ffffff;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-top: 20rpx;
					display: flex;

					.show-items-item-left {
						.show-items-item-image {
							width: 212rpx;
							height: 224rpx;
							margin-top: 28rpx;
							margin-left: 20rpx;
							border-radius: 24rpx;
						}

						.show-items-item-image-bontton {
							height: 70rpx;
							width: 212rpx;
							margin-left: 20rpx;
							display: flex;
							margin-top: 20rpx;

							image {
								width: 36rpx;
								height: 36rpx;
							}

							view {
								width: 128rpx;
								height: 36rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #777777;
								margin-left: 4rpx;
							}
						}
					}

					.show-items-item-right {
						margin-left: 20rpx;
						height: 322rpx;

						.show-items-item-right-one {
							display: flex;
							align-items: center;

							:nth-child(1) {
								width: 72rpx;
								height: 40rpx;
								line-height: 40rpx;
								background-color: #556983;
								border-radius: 10rpx;
								margin-top: 38rpx;
								margin-right: 10rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 18rpx;
								color: #fff;
								text-align: center;
								font-style: normal;
								text-transform: none;
							}

							.active {
								width: 72rpx;
								height: 40rpx;
								line-height: 40rpx;
								background-color: #4fe200;
								border-radius: 10rpx;
								margin-top: 38rpx;
								margin-right: 10rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 18rpx;
								color: #fff;
								text-align: center;
								font-style: normal;
								text-transform: none;
							}

							:nth-child(2) {
								margin-top: 38rpx;
								width: 340rpx;
								height: 40rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 500;
								font-size: 28rpx;
								color: #333333;
								line-height: 39rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}

						.show-items-item-right-two {
							width: 414rpx;
							height: 68rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 400;
							font-size: 28rpx;
							color: #777777;
							line-height: 34rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-top: 10rpx;
							overflow: hidden;
							/* 确保超出部分的文本会被隐藏 */
							text-overflow: ellipsis;
							/* 超出部分显示省略号 */
							display: -webkit-box;
							/* 使用弹性盒子模型 */
							-webkit-line-clamp: 2;
							/* 限制显示两行 */
							-webkit-box-orient: vertical;
							/* 垂直排列子元素 */
						}

						.show-items-item-right-four {
							display: flex;
							width: 414rpx;
							height: 44rpx;

							image {
								width: 24rpx;
								height: 26rpx;
								border-radius: 0rpx 0rpx 0rpx 0rpx;
								margin-top: 9rpx;
							}

							:nth-child(2) {
								flex: 1;
								height: 44rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #333;
								line-height: 44rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								padding-left: 4rpx;
							}

							:nth-child(3) {
								width: 180rpx;
								height: 44rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 600;
								font-size: 24rpx;
								color: #ff4400;
								line-height: 44rpx;
								text-align: right;
								font-style: normal;
								text-transform: none;
							}
						}

						.show-items-item-right-five {
							display: flex;
							width: 414rpx;
							height: 44rpx;

							image {
								width: 40rpx;
								height: 40rpx;
								margin-top: 2rpx;
								border-radius: 24rpx 24rpx 24rpx 24rpx;
							}

							:nth-child(2) {
								width: 220rpx;
								line-height: 44rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 24rpx;
								color: #333;
								line-height: 44rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								padding-left: 10rpx;
							}

							:nth-child(3) {
								width: 154rpx;
								line-height: 44rpx;
								font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
								font-weight: 400;
								font-size: 20rpx;
								color: #ff4400;
								line-height: 44rpx;
								text-align: right;
								font-style: normal;
								text-transform: none;
							}
						}

						.show-items-item-right-six {
							padding-left: 10rpx;
							height: 40rpx;
							width: 414rpx;
							display: flex;
							justify-content: space-between;
							margin-top: 30rpx;
							line-height: 40rpx;

							.b-btn {
								display: flex;

								.b-img {
									width: 40rpx;
									height: 40rpx;
								}

								.b-count {
									margin-left: 4rpx;
									font-size: 24rpx;
								}
							}

							.four {
								width: 130rpx;
								position: relative;

								.b-img {
									width: 36rpx;
									height: 36rpx;
								}

								.share-btn {
									width: 120rpx;
									background-color: transparent;
									padding-left: 36rpx;
									position: absolute;
									font-size: 22rpx;
									line-height: 37rpx;
									top: 0;
								}
							}
						}
					}
				}
			}
		}
	}
</style>